<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<%@include file="../common/header-assets.jsp"%>
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <h4 class="page-title float-left font-16">报警信息</h4>

                        <ol class="breadcrumb float-right">
                            <li class="breadcrumb-item">数据管理</li>
                            <li class="breadcrumb-item active">报警信息</li>
                        </ol>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="card-box">
                <%@include file="../common/search.jsp"%>
                <hr >
                <div class="row">
                    <div class="col-sm-12">
                        <table id="datagrid" class="easyui-datagrid" style="height:auto;"
                               rownumbers="true" fitColumns="true" singleSelect="true"
                               data-options="url:'', pagination:true,pageSize:10,pageList:[10]">
                            <thead>
                                <tr>
                                    <th data-options="field:'yhdName', align:'center', width:120">隐患点</th>
                                    <th data-options="field:'deviceName', align:'center', width:80">监测点</th>
                                    <th data-options="field:'alarmTypeName', align:'center', width:50">报警等级</th>
                                    <th data-options="field:'createTime', align:'center', width:80">报警时间</th>
                                    <th data-options="field:'confirmTime', align:'center', width:80">确认时间</th>
                                    <th data-options="field:'confirmed', align:'center', width:50, formatter:showConfirmed">状态</th>
                                    <%--<th data-options="field:'id', align:'center', width:50, formatter:operate">操作</th>--%>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--  信息添加模态框 -->
<div id="modalSave" class="modal fade bs-example-modal-lg" data-backdrop="static" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
    <form id="formSave" method="post" action="save.html" role="form">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h5 class="modal-title" id="myLargeModalLabel">报警处理</h5>
                </div>
                <div class="modal-body">
                    <p class="text-purple">基本信息</p>
                    <input id="id" name="id" type="hidden"/>
                    <div class="form-group row">
                        <label for="yhdName" class="col-sm-3 col-form-label">隐患点名称<span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="yhdName"></p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="monitorDeviceName" class="col-sm-3 col-form-label">监测类型<span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="monitorDeviceName"></p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="deviceName" class="col-sm-3 col-form-label">测点名称<span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="deviceName"></p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="deviceName" class="col-sm-3 col-form-label">报警时间<span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="createTime"></p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="message" class="col-sm-3 col-form-label">报警内容<span class="text-danger">*</span></label>
                        <div class="col-sm-9">
                            <p class="form-control-static" id="message"></p>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">是否处理</label>
                        <div class="col-sm-9 p-t-5">
                            <label class="custom-control custom-radio">
                                <input name="confirmed" type="radio" class="custom-control-input" value="1" checked>
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">是</span>
                            </label>
                            <label class="custom-control custom-radio">
                                <input name="confirmed" type="radio" class="custom-control-input" value="0">
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">否</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </form>
</div><!-- /.modal -->

<script type="text/javascript">
    let monitorData;
    $(function(){
        //初始化查询条件
        initQueryCondi();
        //初始化多选下拉列表
        $(".select2").select2();
        //编辑窗体提交验证
        editValidataSubmit("formSave", null, "modalSave","datagrid");
    })

    //初始化查询条件
    let initQueryCondi = () =>{
        getDataByAjax("<c:url value='device/queryAll'></c:url>", "post", null, "json", {"dataType": "level"});
    }

    //回调函数
    var ajaxCallBack = (data, extraData) =>{
        if(extraData.dataType === "level"){
            levelData = data.obj;
            let pValue;
            //加载省份数据
            dealWithData(levelData, new Param("s_provinceCode", "provinceCode", "provinceName", null, null, null, true));
            //加载地级市数据
            pValue = $("#s_provinceCode").val()? new Array($("#s_provinceCode").val()) : selOptValToArr("s_provinceCode");
            dealWithData(levelData, new Param("s_cityCode", "cityCode", "cityName", "provinceCode", pValue, null, true));
            //加载县区数据
            pValue = $("#s_cityCode").val()? new Array($("#s_cityCode").val()) : selOptValToArr("s_cityCode");
            dealWithData(levelData, new Param("s_areaCode", "areaCode", "areaName", "cityCode", pValue, null, true));
            //加载隐患点数据
            pValue = $("#s_areaCode").val()? new Array($("#s_areaCode").val()) : selOptValToArr("s_areaCode");
            dealWithData(levelData, new Param("s_hiddenPointId", "hiddenPointId", "hiddenPointName", "areaCode", pValue, null, true));
            //加载监测点数据
            pValue = $("#s_hiddenPointId").val()? new Array($("#s_hiddenPointId").val()) : selOptValToArr("s_hiddenPointId");
            dealWithData(levelData, new Param("s_deviceId", "id", "deviceName", "hiddenPointId", pValue, null, true));

            //加载报警信息
            refreshContent();
        }
    }

    //省份下拉框改变事件
    $("#s_provinceCode").change(function () {
        let id = "s_cityCode";
        let pValue = $("#s_provinceCode").val()? new Array($("#s_provinceCode").val()) : selOptValToArr("s_provinceCode");
        //加载地级市
        dealWithData(levelData, new Param(id, "cityCode", "cityName", "provinceCode", pValue, null, true));
        $("#s_cityCode").change();
    });

    //地级市下拉框改变事件
    $("#s_cityCode").change(function () {
        let id = "s_areaCode";
        let pValue = $("#s_cityCode").val()? new Array($("#s_cityCode").val()) : selOptValToArr("s_cityCode");
        //加载县区
        dealWithData(levelData, new Param(id, "areaCode", "areaName", "cityCode", pValue, null, true));
        $("#s_areaCode").change();
    });

    //县区下拉框改变事件
    $("#s_areaCode").change(function () {
        let id = "s_hiddenPointId";
        let pValue = $("#s_areaCode").val()? new Array($("#s_areaCode").val()) : selOptValToArr("s_areaCode");
        //加载隐患点
        dealWithData(levelData, new Param(id, "hiddenPointId", "hiddenPointName", "areaCode", pValue, null, true));
        $("#s_hiddenPointId").change();
    });

    //隐患点下拉列表改变事件
    $("#s_hiddenPointId").change(function () {
        let id = "s_deviceId";
        let pValue = $("#s_hiddenPointId").val()? new Array($("#s_hiddenPointId").val()) : selOptValToArr("s_hiddenPointId");
        //加载监测点
        dealWithData(levelData, new Param(id, "id", "deviceName", "hiddenPointId", pValue, null, true));
    });

    //搜索
    $("#search").click(function(){
        refreshContent();
    });

    let refreshContent = () =>{
        let provinceCode = $("#s_provinceCode").val();
        let cityCode = $("#s_cityCode").val();
        let areaCode = $("#s_areaCode").val();
        let hiddenPointId = $("#s_hiddenPointId").val();
        let deviceId = $("#s_deviceId").val();
        let startTime = $("#s_startTime").val();
        let endTime = $("#s_endTime").val();
        $("#datagrid").datagrid({
            url:"<c:url value='/alarmLog/query'/>",
            queryParams: {
                provinceCode,
                cityCode,
                areaCode,
                hiddenPointId,
                deviceId,
                startTime,
                endTime
            }
        });
    }

    //判断是否确认
    let showConfirmed = value => {
        let confirmedHtml = "";
        if(value == "1"){
            confirmedHtml = "<i class=\"fi-check \">已处理</i>";
        }else if(value == "0"){
            confirmedHtml = "<i class=\"fi-cross \">未处理</i>";
        }
        return confirmedHtml;
    }

    //操作
    let operate = function(value){
        let str = "";
        let edit = "<input type='button' class='btn btn-link' value='查看' onclick=view('"+ value +"')>";
        str = edit;
        return str;
    }

    //处理报警信息
    let view = id =>{
        //清空窗体信息
        clearEditForm("formSave");
        $("#modalSave").modal("show");
        $.post("<c:url value='/alarmLog/getById.html'/>",{
            id: id,
        },function(data){
            $("#id").val(id);
            $("#yhdName").text(data.yhdName);
            $("#monitorDeviceName").text(data.monitorDeviceName);
            $("#deviceName").text(data.deviceName);
            $("#createTime").text(data.createTime);
            $("#confirmTime").text(data.confirmTime);
            $("#message").text(data.message);
            $("input[type='radio'][name='confirmed'][value="+ data.confirmed +"]").prop("checked", true);
            if(data.confirmed == "1"){
                $("button[type='submit']").hide();
            }else{
                $("button[type='submit']").show();
            }
        },"json");
    }

</script>